<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			#box{width:400px;margin-bottom:0px;margin:100px auto 0px;}
			#box p span{display:inline-block;width:75px;height:35px;line-height:35px;color:#fff;
			background:#000;text-align:center;margin-right:5px;cursor:pointer;}
	        #box p span.hover{background:#f36;}
			#content{position:relative;width:400px;margin:0 auto;}
			#content span{display:block;width:50px;height:30px;line-height:30px;color:#fff;background:rgba(0,0,0,.5);position:absolute;cursor:pointer;}
			#prev{left:0;transform: translateY(-50%);top: 50%;}
			#next{right:0;transform: translateY(-50%);top: 50%;}
			#content p{width:100%;height:25px;line-height:25px;text-align:center;color:#fff;
				position:absolute;background:rgba(0,0,0,.5);}
			#num{top:0;}
			#text{bottom:0;}
 		 </style>
	</head>
	<body>
			<div id="box">
				<p><span id="sx" class="hover">循环切换</span><span id="dx">单项切换</span></p>
			</div>
			<div id="content">
				<img src="images/1.jpeg" id="img" width="400px"/>
				<span id="prev">上一张</span>
				<span id="next">下一张</span>
				<p id="num"></p>
				<p id="text"></p>
			</div>
			<script>
				
			</script>
	</body>
	<script type="text/javascript">
		var imgarry=["images/1.jpeg","images/2.jpeg","images/3.jpeg","images/4.jpeg","images/5.jpeg","images/6.jpeg"];
		var textarry=['第一张图片',"第二张图片","第三张图片","第四张图片","第五张图片","第六张图片"];
		//获取必须的元素
		var oImg = document.getElementById("img");//内容图片,到时要src
		
		var oPrev = document.getElementById("prev");//上一张
		var oNext = document.getElementById('next');//下一张
		
		var oNum = document.getElementById("num");//内容顶部的数据
		var oText = document.getElementById("text");//内容底部的数据
		var i = 0;
		oImg.src=imgarry[i];
		oNum.innerHTML=(i+1)+"/"+imgarry.length;
		oText.innerHTML=textarry[i];
		sx.onclick =function(){
			dx.className=" ";
			this.className ="hover";
			oPrev.onclick = sxpre;
			oNext.onclick = sxnext;
		}
		
		dx.onclick = function(){
			sx.className=" ";
			this.className = "hover";
			oPrev.onclick = dxpre;
			oNext.onclick = dxnext;
		}
		function sxpre(){
			i--;
			if(i<0){
				i = imgarry.length-1;
			}
			play();
		}
		function sxnext(){
			i++;
			if (i>imgarry.length-1) {
				i=0
			}
			play();
		}
		
		function dxpre(){
			i--;
			if (i<0) {
				i = 0;
				alert("已经是第一张，不能再往前了")
				return false;
			}
			play();
		}
		
		function dxnext(){
			i++;
			if (i>imgarry.length-1) {
				i = imgarry.length-1;
				alert("已经是最后一张");
				return false;
			}
			play();
		}
		
		oPrev.onclick = sxpre;
		oNext.onclick = sxnext;
		function play(){
			oImg.src=imgarry[i];
			oNum.innerHTML = (i+1)+"/"+imgarry.length;
			oText.innerHTML=textarry[i];
		}
	</script>
</html>
